import React, { useEffect, useState } from 'react'
import "./SongList.css"
import Scroll from '../../../baseUI/scroll';
import ellipsis from '../../../assets/images/h省略号.png'
import video_play from '../../../assets/images/video_play.png'
import add_play from '../../../assets/images/add_play.png'
import play_loop from '../../../assets/images/play_loop.png'
import SongConsole from './songconsole/songconsole';
import ControlSong from '../../../baseUI/Control/controlSong';





const SongList = (props) => {
    // console.log(props,'songlist');
    const { songSheetDetail={},tracks ,setSongId,songUrl=[]}=props
    const [urlArray=[]] = songUrl
    const {url} = urlArray
    // console.log(url,'dddddd')
    // console.log(songUrl[0].url,'urlllllllll');
    function loop(){
        console.log("6666");
        let audio = document.getElementById('audio_control');
        audio.loop=false;
        audio.addEventListener('ended', function () {
         setSongIndex(++songIndex) //行了
         if(songIndex>tracks.length-1){
            songIndex=0;
            setSongIndex(0)
        }
         setSongId(tracks[songIndex].id)
         
         console.log(songIndex)
         
         }, false);
    }
    // console.log(tracks);
    let [songIndex,setSongIndex] = useState(0);
    // const {avatarUrl,nickname} = creator
  
    // console.log(tracks,'track');
    
    return (
        <div className="songList">
            <Scroll
                direction={"vertical"}
                refresh={true}
                onScroll={
                    (e) => {
                        // console.log(e.y)
                        if (e.y < -1142) {
                            
                        } else {
                            
                        }
                        
                    }
                }
                // pullUp={}
                // pullDown={}
                >
                    <div className="scroll_list">
            {
            tracks.map((item,index)=>{

                return(
                    <div className="songDiv" onClick={()=>(setSongIndex(index),setSongId(tracks[index].id))} key={index}>
                    <div className={`Serial ${index ==songIndex ? "active_song": "" }`}>
                        {
                            index+1
                        }
                    </div>
                    <div className="song_description">
                        <div className="song_description_top">
                            <div className={`song_name ${index ==songIndex ? "active_song_name": "" }`}>
                                {
                                    item.name
                                }
                            </div>
                        </div>
                        <div className="song_description_footer">
                            <div className="song_label">
                                <div className="song_label_div">
                                    SQ
                                </div>
    
                            </div>
                            <div className={`song_author ${index ==songIndex ? "active_song_name": "" }`}>
                                {
                                    item.artists[0].name
                                }•
                                {
                                    item.album.name                         
                                          }
                            </div>
                        </div>
                    </div>
                    <div className="song_icon">
                    <div className="video_play_songlist">
                            <img src={video_play} alt=""  className='video_play_songlist_play'/>
                        </div>
                        <div className="add_play_songlist">
                            <img src={add_play} alt=""  className='ellipsis_video_play_pic'/>
                        </div>
                        <div className="ellipsis_songlist">
                            <img src={ellipsis} alt=""  className='ellipsis_songlist_pic'/>
                        </div>
                        
    
                    </div>
                    </div>

                )
               

            })
            
            }
            </div>
            </Scroll>
{/*            
            {   
                
                songUrl?
                <div className="audio-control">
                <audio src={url} autoPlay controls loop className='audio_control' id='audio_control'></audio>
                <div className="loop" onClick={loop}><img src={play_loop} alt="" className='loop_img'/></div>
                </div>
                :<></>
            }
             */}
            
        </div>
    
    )
}

export default SongList